<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.2">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"wrr123.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.json"};
  </script>

  <meta name="description" content="vue Element UI 日期选择器获取日期格式问题 t.getTime is not a functionoschina参考文档 vuejs 不支持 ie 浏览器的问题可能原因(一)因为 Vue 使用了 ES6 Promise，而 IE 浏览器不支持。 解决方法： 使用 babel-polyfill 转换 npm install [--save-dev] babel-polyfill 如果使">
<meta property="og:type" content="article">
<meta property="og:title" content="faq-vuejs">
<meta property="og:url" content="https://wrr123.github.io/2020/07/06/faq-vuejs/index.html">
<meta property="og:site_name" content="一缕烟气">
<meta property="og:description" content="vue Element UI 日期选择器获取日期格式问题 t.getTime is not a functionoschina参考文档 vuejs 不支持 ie 浏览器的问题可能原因(一)因为 Vue 使用了 ES6 Promise，而 IE 浏览器不支持。 解决方法： 使用 babel-polyfill 转换 npm install [--save-dev] babel-polyfill 如果使">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://localhost:4000/2020/07/06/faq-vuejs/001.png">
<meta property="article:published_time" content="2020-07-06T02:12:21.000Z">
<meta property="article:modified_time" content="2022-02-18T02:52:04.413Z">
<meta property="article:author" content="田园隐士">
<meta property="article:tag" content="vuejs">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://localhost:4000/2020/07/06/faq-vuejs/001.png">

<link rel="canonical" href="https://wrr123.github.io/2020/07/06/faq-vuejs/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>faq-vuejs | 一缕烟气</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="一缕烟气" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">一缕烟气</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">沧海月明珠有泪，蓝田日暖玉生烟</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wrr123.github.io/2020/07/06/faq-vuejs/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="田园隐士">
      <meta itemprop="description" content="talk is cheap, show me the code">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="一缕烟气">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          faq-vuejs
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-07-06 10:12:21" itemprop="dateCreated datePublished" datetime="2020-07-06T10:12:21+08:00">2020-07-06</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2022-02-18 10:52:04" itemprop="dateModified" datetime="2022-02-18T10:52:04+08:00">2022-02-18</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF/" itemprop="url" rel="index"><span itemprop="name">前端</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>3.5k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>3 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h4 id="vue-Element-UI-日期选择器获取日期格式问题-t-getTime-is-not-a-function"><a href="#vue-Element-UI-日期选择器获取日期格式问题-t-getTime-is-not-a-function" class="headerlink" title="vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function"></a>vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function</h4><p><a target="_blank" rel="noopener" href="https://my.oschina.net/u/4298485/blog/3937219">oschina参考文档</a></p>
<h4 id="vuejs-不支持-ie-浏览器的问题"><a href="#vuejs-不支持-ie-浏览器的问题" class="headerlink" title="vuejs 不支持 ie 浏览器的问题"></a>vuejs 不支持 ie 浏览器的问题</h4><h5 id="可能原因-一"><a href="#可能原因-一" class="headerlink" title="可能原因(一)"></a>可能原因(一)</h5><p>因为 Vue 使用了 ES6 Promise，而 IE 浏览器不支持。</p>
<p><strong>解决方法：</strong></p>
<p>使用 babel-polyfill 转换</p>
<p><code>npm install [--save-dev] babel-polyfill</code></p>
<p>如果使用 vue-cli 项目，在 webpack.config.js 中添加：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">require</span>(<span class="string">&#x27;babel-polyfill&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="attr">entry</span>: &#123;</span><br><span class="line">    <span class="attr">app</span>: [<span class="string">&#x27;babel-polyfill&#x27;</span>, <span class="string">&#x27;./src/main.js&#x27;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<span id="more"></span>
<h4 id="有作用域的-css"><a href="#有作用域的-css" class="headerlink" title="有作用域的 css"></a>有作用域的 css</h4><p>当 <code>&lt;style&gt;</code> 标签有 <code>scoped</code> 属性时，它的 css 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。</p>
<p><strong>注意</strong></p>
<h5 id="混用本地和全局样式"><a href="#混用本地和全局样式" class="headerlink" title="混用本地和全局样式"></a>混用本地和全局样式</h5><p>你可以在一个组件中同时使用有作用域和无作用域的样式：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="comment">/* 全局样式 */</span></span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="comment">/* 本地样式 */</span></span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h5 id="子组件的根元素"><a href="#子组件的根元素" class="headerlink" title="子组件的根元素"></a>子组件的根元素</h5><blockquote>
<p>使用 <code>scoped</code> 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。</p>
</blockquote>
<h5 id="深度作用选择器"><a href="#深度作用选择器" class="headerlink" title="深度作用选择器"></a>深度作用选择器</h5><blockquote>
<p>如果你希望 <code>scoped</code> 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 <code>&gt;&gt;&gt;</code> 操作符：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">scoped</span>&gt;</span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-class">.a</span> &gt;&gt;&gt; <span class="selector-class">.b</span> &#123; <span class="comment">/* ... */</span> &#125;</span></span><br><span class="line"><span class="language-css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>上述代码将会编译成：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.a</span><span class="selector-attr">[data-v-f3f3eg9]</span> <span class="selector-class">.b</span> &#123; <span class="comment">/* ... */</span> &#125;</span><br></pre></td></tr></table></figure>
<p>有些像 Sass 之类的预处理器无法正确解析 <code>&gt;&gt;&gt;</code>。这种情况下你可以使用 <code>/deep/</code> 操作符取而代之——这是一个 <code>&gt;&gt;&gt;</code> 的别名，同样可以正常工作。</p>
</blockquote>
<h5 id="动态生成的内容"><a href="#动态生成的内容" class="headerlink" title="动态生成的内容"></a>动态生成的内容</h5><blockquote>
<p>通过 <code>v-html</code> 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。</p>
</blockquote>
<h5 id="还有一些要留意"><a href="#还有一些要留意" class="headerlink" title="还有一些要留意"></a>还有一些要留意</h5><blockquote>
<ul>
<li><strong>CSS 作用域不能代替 class</strong>。考虑到浏览器渲染各种 CSS 选择器的方式，当 <code>p &#123; color: red &#125;</code> 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 <code>.example &#123; color: red &#125;</code>，性能影响就会消除。你可以在<a target="_blank" rel="noopener" href="https://stevesouders.com/efws/css-selectors/csscreate.php">这块试验田</a>中测试它们的不同。</li>
<li><strong>在递归组件中小心使用后代选择器!</strong> 对选择器 <code>.a .b</code> 中的 CSS 规则来说，如果匹配 <code>.a</code> 的元素包含一个递归子组件，则所有的子组件中的 <code>.b</code> 都将被这个规则匹配。</li>
</ul>
</blockquote>
<h4 id="Module-build-failed-Error-ENOENT-no-such-file-or-directory-scandir-‘D-www-第三方Demo-vue2-0-demos-node-modules-node-sass-vendor’"><a href="#Module-build-failed-Error-ENOENT-no-such-file-or-directory-scandir-‘D-www-第三方Demo-vue2-0-demos-node-modules-node-sass-vendor’" class="headerlink" title="Module build failed: Error: ENOENT: no such file or directory, scandir ‘D:\www\第三方Demo\vue2.0-demos\node_modules\node-sass\vendor’"></a>Module build failed: Error: ENOENT: no such file or directory, scandir ‘D:\www\第三方Demo\vue2.0-demos\node_modules\node-sass\vendor’</h4><h5 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h5><p><code>npm rebuild node-sass</code></p>
<h4 id="Vue-js-中的图片引用路径"><a href="#Vue-js-中的图片引用路径" class="headerlink" title="Vue.js 中的图片引用路径"></a>Vue.js 中的图片引用路径</h4><h5 id="使用-import-的方式导入"><a href="#使用-import-的方式导入" class="headerlink" title="使用 import 的方式导入"></a>使用 import 的方式导入</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import avatar from &#x27;@/assets/logo.png&#x27;</span><br><span class="line">// 在 data 中定义</span><br><span class="line">avatar: avatar</span><br></pre></td></tr></table></figure>
<h5 id="使用-require-的方式导入"><a href="#使用-require-的方式导入" class="headerlink" title="使用 require 的方式导入"></a>使用 require 的方式导入</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 在 data 中定义</span><br><span class="line">avatar: require(&#x27;@/assets/logo.png&#x27;)</span><br></pre></td></tr></table></figure>
<p><img src="http://localhost:4000/2020/07/06/faq-vuejs/001.png" alt></p>
<h5 id="资源路径处理"><a href="#资源路径处理" class="headerlink" title="资源路径处理"></a>资源路径处理</h5><p>默认情况下，<code>vue-loader</code> 使用 css-loader 和 Vue 模板编译器自动处理样式和模板文件。在编译过程中，所有的资源路径例如 <code>&lt;img src=&quot;...&quot;&gt;</code> 、<code>background: url(...) 和 @import</code> <strong>会作为模块依赖 。</strong></p>
<p>一个栗子：url(./image.png) 会被转换为 require(‘./image.png’)，而</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;../image.png&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>将会编译为：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">createElement</span>(<span class="string">&#x27;img&#x27;</span>, &#123;<span class="attr">attrs</span>: &#123;<span class="attr">src</span>: <span class="built_in">require</span>(<span class="string">&#x27;../image.png&#x27;</span>)&#125;&#125;)</span><br></pre></td></tr></table></figure>
<h5 id="编译规则"><a href="#编译规则" class="headerlink" title="编译规则"></a>编译规则</h5><blockquote>
<ul>
<li><p>如果路径是绝对路径，会原样保留。</p>
</li>
<li><p>如果路径以 <code>.</code> 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。</p>
</li>
<li><p>如果路径以 <code>~</code> 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 node 依赖中的资源：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;~some-npm-package/foo.png&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>(13.7.0+) 如果路径以 <code>@</code> 开头，也会被看作模块依赖。如果你的 webpack 配置中给 <code>@</code> 配置了 alias，这就很有用了。所有 <code>vue-cli</code> 创建的项目都默认配置了将 <code>@</code> 指向 <code>/src</code>。</p>
</li>
</ul>
</blockquote>
<h4 id="vue-路由出现多级时，页面访问出现-404-的问题"><a href="#vue-路由出现多级时，页面访问出现-404-的问题" class="headerlink" title="vue 路由出现多级时，页面访问出现 404 的问题"></a>vue 路由出现多级时，页面访问出现 404 的问题</h4><p>产生问题的原因：<br>路由导航是通过 path 参数来进行跳转的<br><code>router.push(&#123; path: &#39;user&#39;&#125;)</code><br>如果换成 name 参数来进行导航的话，就正常了</p>
<p>暂未发现为什么这个原因会产生此问题。</p>
<h4 id="vue-同一路由不跳转的问题（path-相同，query-不同"><a href="#vue-同一路由不跳转的问题（path-相同，query-不同" class="headerlink" title="vue 同一路由不跳转的问题（path 相同，query 不同)"></a>vue 同一路由不跳转的问题（path 相同，query 不同)</h4><p>解决方法：</p>
<ol>
<li>给 router-view 设置 key 属性为路由的完整路径</li>
<li>官方给出的方法是通过 watch 监听路由变化，做判断路由路径然后调用响应的方法</li>
<li>通过组件导航守卫来设置对应的 meta 属性</li>
</ol>
<h4 id="出现-Uncaught-in-Promise-错误"><a href="#出现-Uncaught-in-Promise-错误" class="headerlink" title="出现 Uncaught (in Promise) 错误"></a>出现 <code>Uncaught (in Promise)</code> 错误</h4><p>错误原因：<code>你的某个 promise 没有加上 catch 语句。</code></p>
<h4 id="vue强制刷新组件的方法"><a href="#vue强制刷新组件的方法" class="headerlink" title="vue强制刷新组件的方法"></a>vue强制刷新组件的方法</h4><h5 id="不妥的方式：使用-v-if"><a href="#不妥的方式：使用-v-if" class="headerlink" title="不妥的方式：使用 v-if"></a>不妥的方式：使用 <code>v-if</code></h5><p>栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;my-component v-if=&quot;renderComponent&quot; /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">  export default &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">      return &#123;</span><br><span class="line">        renderComponent: true,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">      forceRerender() &#123;</span><br><span class="line">        // 从 DOM 中删除 my-component 组件</span><br><span class="line">        this.renderComponent = false;</span><br><span class="line">        </span><br><span class="line">        this.$nextTick(() =&gt; &#123;</span><br><span class="line">          // 在 DOM 中添加 my-component 组件</span><br><span class="line">          this.renderComponent = true;</span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="较好的方法：forceUpdate方法"><a href="#较好的方法：forceUpdate方法" class="headerlink" title="较好的方法：forceUpdate方法"></a>较好的方法：<code>forceUpdate</code>方法</h5><p>栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// 全局</span><br><span class="line">import Vue from &#x27;vue&#x27;;</span><br><span class="line">Vue.forceUpdate();</span><br><span class="line"></span><br><span class="line">// 使用组件实例</span><br><span class="line">export default &#123;</span><br><span class="line">  methods: &#123;</span><br><span class="line">    methodThatForcesUpdate() &#123;</span><br><span class="line">      // ...</span><br><span class="line">      this.$forceUpdate();</span><br><span class="line">      // ...</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="最好的方法：在组件上进行-key-更改"><a href="#最好的方法：在组件上进行-key-更改" class="headerlink" title="最好的方法：在组件上进行 key 更改"></a>最好的方法：在组件上进行 <code>key</code> 更改</h5><blockquote>
<p>要正确地做到这一点，我们将提供一个<code>key</code>属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果<code>key</code>保持不变，则不会更改组件，但是如果<code>key</code>发生更改，Vue 就会知道应该删除旧组件并创建新组件。</p>
</blockquote>
<p>栗子：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;component-to-re-render :key=&quot;componentKey&quot; /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      componentKey: 0,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    forceRerender() &#123;</span><br><span class="line">      this.componentKey += 1;  </span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

    </div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="/atom.xml">
            <span class="icon">
              <i class="fa fa-rss"></i>
            </span>

            <span class="label">RSS</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/vuejs/" rel="tag"># vuejs</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2020/07/03/git-reset%E5%92%8Crevert%E7%9A%84%E5%8C%BA%E5%88%AB/" rel="prev" title="git reset和revert的区别">
      <i class="fa fa-chevron-left"></i> git reset和revert的区别
    </a></div>
      <div class="post-nav-item">
    <a href="/2020/07/06/easypoi-excel%E6%A8%A1%E6%9D%BF%E5%A4%84%E7%90%86/" rel="next" title="easypoi-excel模板处理">
      easypoi-excel模板处理 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-4"><a class="nav-link" href="#vue-Element-UI-%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9%E5%99%A8%E8%8E%B7%E5%8F%96%E6%97%A5%E6%9C%9F%E6%A0%BC%E5%BC%8F%E9%97%AE%E9%A2%98-t-getTime-is-not-a-function"><span class="nav-number">1.</span> <span class="nav-text">vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vuejs-%E4%B8%8D%E6%94%AF%E6%8C%81-ie-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">2.</span> <span class="nav-text">vuejs 不支持 ie 浏览器的问题</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%8F%AF%E8%83%BD%E5%8E%9F%E5%9B%A0-%E4%B8%80"><span class="nav-number">2.1.</span> <span class="nav-text">可能原因(一)</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%9C%89%E4%BD%9C%E7%94%A8%E5%9F%9F%E7%9A%84-css"><span class="nav-number">3.</span> <span class="nav-text">有作用域的 css</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%B7%B7%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%92%8C%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F"><span class="nav-number">3.1.</span> <span class="nav-text">混用本地和全局样式</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0"><span class="nav-number">3.2.</span> <span class="nav-text">子组件的根元素</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">3.3.</span> <span class="nav-text">深度作用选择器</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E7%9A%84%E5%86%85%E5%AE%B9"><span class="nav-number">3.4.</span> <span class="nav-text">动态生成的内容</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%BF%98%E6%9C%89%E4%B8%80%E4%BA%9B%E8%A6%81%E7%95%99%E6%84%8F"><span class="nav-number">3.5.</span> <span class="nav-text">还有一些要留意</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Module-build-failed-Error-ENOENT-no-such-file-or-directory-scandir-%E2%80%98D-www-%E7%AC%AC%E4%B8%89%E6%96%B9Demo-vue2-0-demos-node-modules-node-sass-vendor%E2%80%99"><span class="nav-number">4.</span> <span class="nav-text">Module build failed: Error: ENOENT: no such file or directory, scandir ‘D:\www\第三方Demo\vue2.0-demos\node_modules\node-sass\vendor’</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88"><span class="nav-number">4.1.</span> <span class="nav-text">解决方案</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Vue-js-%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87%E5%BC%95%E7%94%A8%E8%B7%AF%E5%BE%84"><span class="nav-number">5.</span> <span class="nav-text">Vue.js 中的图片引用路径</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-import-%E7%9A%84%E6%96%B9%E5%BC%8F%E5%AF%BC%E5%85%A5"><span class="nav-number">5.1.</span> <span class="nav-text">使用 import 的方式导入</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-require-%E7%9A%84%E6%96%B9%E5%BC%8F%E5%AF%BC%E5%85%A5"><span class="nav-number">5.2.</span> <span class="nav-text">使用 require 的方式导入</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%B5%84%E6%BA%90%E8%B7%AF%E5%BE%84%E5%A4%84%E7%90%86"><span class="nav-number">5.3.</span> <span class="nav-text">资源路径处理</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E7%BC%96%E8%AF%91%E8%A7%84%E5%88%99"><span class="nav-number">5.4.</span> <span class="nav-text">编译规则</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue-%E8%B7%AF%E7%94%B1%E5%87%BA%E7%8E%B0%E5%A4%9A%E7%BA%A7%E6%97%B6%EF%BC%8C%E9%A1%B5%E9%9D%A2%E8%AE%BF%E9%97%AE%E5%87%BA%E7%8E%B0-404-%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">6.</span> <span class="nav-text">vue 路由出现多级时，页面访问出现 404 的问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue-%E5%90%8C%E4%B8%80%E8%B7%AF%E7%94%B1%E4%B8%8D%E8%B7%B3%E8%BD%AC%E7%9A%84%E9%97%AE%E9%A2%98%EF%BC%88path-%E7%9B%B8%E5%90%8C%EF%BC%8Cquery-%E4%B8%8D%E5%90%8C"><span class="nav-number">7.</span> <span class="nav-text">vue 同一路由不跳转的问题（path 相同，query 不同)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%87%BA%E7%8E%B0-Uncaught-in-Promise-%E9%94%99%E8%AF%AF"><span class="nav-number">8.</span> <span class="nav-text">出现 Uncaught (in Promise) 错误</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue%E5%BC%BA%E5%88%B6%E5%88%B7%E6%96%B0%E7%BB%84%E4%BB%B6%E7%9A%84%E6%96%B9%E6%B3%95"><span class="nav-number">9.</span> <span class="nav-text">vue强制刷新组件的方法</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#%E4%B8%8D%E5%A6%A5%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9A%E4%BD%BF%E7%94%A8-v-if"><span class="nav-number">9.1.</span> <span class="nav-text">不妥的方式：使用 v-if</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E8%BE%83%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9AforceUpdate%E6%96%B9%E6%B3%95"><span class="nav-number">9.2.</span> <span class="nav-text">较好的方法：forceUpdate方法</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#%E6%9C%80%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9A%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E8%BF%9B%E8%A1%8C-key-%E6%9B%B4%E6%94%B9"><span class="nav-number">9.3.</span> <span class="nav-text">最好的方法：在组件上进行 key 更改</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">田园隐士</p>
  <div class="site-description" itemprop="description">talk is cheap, show me the code</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">347</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">53</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">115</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2022</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">田园隐士</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">587k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">8:53</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

  

</body>
</html>
